<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/jquery.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/jquery-ui.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/v5/jquery-ui.css">

</head>
<body >
    <style>.box {  } </style>
        
    <div class="box">
                <div id="source_bar" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 0px; left: 0px;"></div>
    <script>
        var chart_source_bar = echarts.init(
            document.getElementById('source_bar'), 'white', {renderer: 'canvas'});
        var option_source_bar = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "bar",
            "legendHoverLink": true,
            "data": [
                "13",
                "1",
                "4"
            ],
            "realtimeSort": false,
            "showBackground": false,
            "stackStrategy": "samesign",
            "cursor": "pointer",
            "barWidth": "50%",
            "barMinHeight": 0,
            "barCategoryGap": "20%",
            "barGap": "30%",
            "large": false,
            "largeThreshold": 400,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "clip": true,
            "zlevel": 0,
            "z": 2,
            "label": {
                "show": true,
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u5168\u90e8\u6765\u81ea\u5bb6\u5ead",
                "\u5168\u90e8\u9760\u81ea\u5df1\u8d5a\u53d6",
                "\u90e8\u5206\u6765\u81ea\u5bb6\u5ead\uff0c\u90e8\u5206\u9760\u81ea\u5df1\u8d5a\u53d6"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "show": true,
            "text": "     \u751f\u6d3b\u8d39\u6765\u6e90",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_source_bar.setOption(option_source_bar);
    </script>
<br/>                <div id="spend_doughnut" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 0px; left: 341.5px;"></div>
    <script>
        var chart_spend_doughnut = echarts.init(
            document.getElementById('spend_doughnut'), 'white', {renderer: 'canvas'});
        var option_spend_doughnut = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "pie",
            "colorBy": "data",
            "legendHoverLink": true,
            "selectedMode": false,
            "selectedOffset": 10,
            "clockwise": true,
            "startAngle": 90,
            "minAngle": 0,
            "minShowLabelAngle": 0,
            "avoidLabelOverlap": true,
            "stillShowZeroSum": true,
            "percentPrecision": 2,
            "showEmptyCircle": true,
            "emptyCircleStyle": {
                "color": "lightgray",
                "borderColor": "#000",
                "borderWidth": 0,
                "borderType": "solid",
                "borderDashOffset": 0,
                "borderCap": "butt",
                "borderJoin": "bevel",
                "borderMiterLimit": 10,
                "opacity": 1
            },
            "data": [
                {
                    "name": "1000\u4ee5\u4e0a",
                    "value": 7
                },
                {
                    "name": "300\u4ee5\u4e0b",
                    "value": 4
                },
                {
                    "name": "600-1000",
                    "value": 7
                }
            ],
            "radius": [
                50,
                75
            ],
            "center": [
                "50%",
                "55%"
            ],
            "label": {
                "show": true,
                "margin": 8
            },
            "labelLine": {
                "show": true,
                "showAbove": false,
                "length": 15,
                "length2": 15,
                "smooth": false,
                "minTurnAngle": 90,
                "maxSurfaceAngle": 90
            }
        }
    ],
    "legend": [
        {
            "data": [
                "1000\u4ee5\u4e0a",
                "300\u4ee5\u4e0b",
                "600-1000"
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "    \u5927\u5b66\u751f\u5a31\u4e50\u6d88\u8d39",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e\u7d20\u517b \u5f20\u5586\u5a67 2200310758",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_spend_doughnut.setOption(option_spend_doughnut);
    </script>
<br/>                <div id="clothes_Line" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 0px; left: 683px;"></div>
    <script>
        var chart_clothes_Line = echarts.init(
            document.getElementById('clothes_Line'), 'white', {renderer: 'canvas'});
        var option_clothes_Line = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "line",
            "connectNulls": false,
            "xAxisIndex": 0,
            "symbolSize": 4,
            "showSymbol": true,
            "smooth": false,
            "clip": true,
            "step": false,
            "data": [
                [
                    "100-500",
                    11
                ],
                [
                    "1000\u4ee5\u4e0a",
                    1
                ],
                [
                    "100\u4ee5\u4e0b",
                    5
                ],
                [
                    "500-1000",
                    1
                ]
            ],
            "hoverAnimation": true,
            "label": {
                "show": true,
                "margin": 8
            },
            "logBase": 10,
            "seriesLayoutBy": "column",
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            },
            "areaStyle": {
                "opacity": 0
            },
            "zlevel": 0,
            "z": 0
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "formatter": "\u9009\u62e9 {c} \u4eba",
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "xAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "100-500",
                "1000\u4ee5\u4e0a",
                "100\u4ee5\u4e0b",
                "500-1000"
            ]
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "title": [
        {
            "show": true,
            "text": "   \u751f\u6d3b\u7528\u54c1\u8863\u7269\u82b1\u8d39",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e\u7d20\u517b 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_clothes_Line.setOption(option_clothes_Line);
    </script>
<br/>                <div id="spendway_pictoriabar" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 0px; left: 1024.5px;"></div>
    <script>
        var chart_spendway_pictoriabar = echarts.init(
            document.getElementById('spendway_pictoriabar'), 'white', {renderer: 'canvas'});
        var option_spendway_pictoriabar = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "pictorialBar",
            "symbol": "image://\u786c\u5e01.svg",
            "symbolSize": [
                30,
                30
            ],
            "symbolRepeat": true,
            "symbolClip": false,
            "data": [
                14,
                1,
                2,
                1
            ],
            "barCategoryGap": "20%",
            "label": {
                "show": true,
                "position": "right",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "xAxis": [
        {
            "show": false,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "yAxis": [
        {
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": false,
                "onZero": true,
                "onZeroAxisIndex": 0
            },
            "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u4e00\u8fb9\u82b1\u4e00\u8fb9\u6253\u7b97",
                "\u5168\u90e8\u8ba1\u5212\u597d\u518d\u82b1",
                "\u60f3\u82b1\u5c31\u82b1",
                "\u80fd\u7701\u5219\u7701"
            ]
        }
    ],
    "title": [
        {
            "show": true,
            "text": "       \u82b1\u94b1\u65b9\u5f0f",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_spendway_pictoriabar.setOption(option_spendway_pictoriabar);
    </script>
<br/>                <div id="enough_pie" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 450px; left: 0px;"></div>
    <script>
        var chart_enough_pie = echarts.init(
            document.getElementById('enough_pie'), 'white', {renderer: 'canvas'});
        var option_enough_pie = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "pie",
            "colorBy": "data",
            "legendHoverLink": true,
            "selectedMode": false,
            "selectedOffset": 10,
            "clockwise": true,
            "startAngle": 90,
            "minAngle": 0,
            "minShowLabelAngle": 0,
            "avoidLabelOverlap": true,
            "stillShowZeroSum": true,
            "percentPrecision": 2,
            "showEmptyCircle": true,
            "emptyCircleStyle": {
                "color": "lightgray",
                "borderColor": "#000",
                "borderWidth": 0,
                "borderType": "solid",
                "borderDashOffset": 0,
                "borderCap": "butt",
                "borderJoin": "bevel",
                "borderMiterLimit": 10,
                "opacity": 1
            },
            "data": [
                {
                    "name": "\u4e0d\u591f",
                    "value": 3
                },
                {
                    "name": "\u521a\u597d\u591f\u7528",
                    "value": 8
                },
                {
                    "name": "\u6709\u5bcc\u4f59",
                    "value": 7
                }
            ],
            "radius": [
                0,
                75
            ],
            "center": [
                "50%",
                "50%"
            ],
            "label": {
                "show": true,
                "margin": 8
            },
            "labelLine": {
                "show": true,
                "showAbove": false,
                "length": 15,
                "length2": 15,
                "smooth": false,
                "minTurnAngle": 90,
                "maxSurfaceAngle": 90
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u4e0d\u591f",
                "\u521a\u597d\u591f\u7528",
                "\u6709\u5bcc\u4f59"
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "    \u751f\u6d3b\u8d39\u662f\u5426\u591f\u7528",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e\u7d20\u517b 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_enough_pie.setOption(option_enough_pie);
    </script>
<br/>                <div id="read_polar" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 450px; left: 341.5px;"></div>
    <script>
        var chart_read_polar = echarts.init(
            document.getElementById('read_polar'), 'white', {renderer: 'canvas'});
        var option_read_polar = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "effectScatter",
            "coordinateSystem": "polar",
            "showEffectOn": "render",
            "rippleEffect": {
                "show": true,
                "brushType": "fill",
                "scale": 2.5,
                "period": 4,
                "color": "orange",
                "symbol": "diamond",
                "symbolSize": [
                    30,
                    30
                ],
                "trailLength": 1
            },
            "symbol": "diamond",
            "symbolSize": 20,
            "data": [
                10,
                2,
                1,
                5
            ],
            "label": {
                "show": false,
                "margin": 8
            }
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "radiusAxis": {
        "nameGap": 15,
        "inverse": false,
        "scale": false,
        "splitNumber": 5,
        "minInterval": 0
    },
    "angleAxis": {
        "startAngle": 0,
        "data": [
            "1-50",
            "200\u4ee5\u4e0a",
            "50-200",
            "\u65e0"
        ],
        "clockwise": false,
        "scale": false,
        "splitNumber": 5
    },
    "polar": {
        "center": [
            "50%",
            "55%"
        ]
    },
    "title": [
        {
            "show": true,
            "text": "     \u5b66\u4e60\u7528\u54c1\u82b1\u8d39",
            "target": "blank",
            "subtext": "\u5f20\u5586\u5a67 \u5927\u6570\u636e\u79d1\u5b66 2200310758",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_read_polar.setOption(option_read_polar);
    </script>
<br/>                <div id="hobby_rose" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 450px; left: 683px;"></div>
    <script>
        var chart_hobby_rose = echarts.init(
            document.getElementById('hobby_rose'), 'white', {renderer: 'canvas'});
        var option_hobby_rose = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "pie",
            "colorBy": "data",
            "legendHoverLink": true,
            "selectedMode": false,
            "selectedOffset": 10,
            "clockwise": true,
            "startAngle": 90,
            "minAngle": 0,
            "minShowLabelAngle": 0,
            "avoidLabelOverlap": true,
            "stillShowZeroSum": true,
            "percentPrecision": 2,
            "showEmptyCircle": true,
            "emptyCircleStyle": {
                "color": "lightgray",
                "borderColor": "#000",
                "borderWidth": 0,
                "borderType": "solid",
                "borderDashOffset": 0,
                "borderCap": "butt",
                "borderJoin": "bevel",
                "borderMiterLimit": 10,
                "opacity": 1
            },
            "data": [
                {
                    "name": "100\u4ee5\u5185",
                    "value": 8
                },
                {
                    "name": "100\uff5e500",
                    "value": 1
                },
                {
                    "name": "500\u4ee5\u4e0a",
                    "value": 3
                },
                {
                    "name": "\u4ece\u65e0",
                    "value": 6
                }
            ],
            "radius": [
                50,
                80
            ],
            "center": [
                "50%",
                "50%"
            ],
            "roseType": "raduis",
            "label": {
                "show": true,
                "margin": 8
            },
            "labelLine": {
                "show": true,
                "showAbove": false,
                "length": 15,
                "length2": 15,
                "smooth": false,
                "minTurnAngle": 90,
                "maxSurfaceAngle": 90
            }
        }
    ],
    "legend": [
        {
            "data": [
                "100\u4ee5\u5185",
                "100\uff5e500",
                "500\u4ee5\u4e0a",
                "\u4ece\u65e0"
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "formatter": "\u9009\u62e9'{b}'\u7684\u6709{c} \u4eba",
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "     \u5174\u8da3\u7231\u597d\u82b1\u8d39",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e\u7d20\u517b 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "top": "10px",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_hobby_rose.setOption(option_hobby_rose);
    </script>
<br/>                <div id="otherspend_wordcloud" class="chart-container" style="position: absolute; width: 341.5px; height: 384px; top: 450px; left: 1024.5px;"></div>
    <script>
        var chart_otherspend_wordcloud = echarts.init(
            document.getElementById('otherspend_wordcloud'), 'white', {renderer: 'canvas'});
        var option_otherspend_wordcloud = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "wordCloud",
            "shape": "circle",
            "rotationRange": [
                -90,
                90
            ],
            "rotationStep": 45,
            "girdSize": 20,
            "sizeRange": [
                20,
                50
            ],
            "data": [
                {
                    "name": "\u4e70\u4e66",
                    "value": 3.0,
                    "textStyle": {
                        "color": "rgb(3,142,65)"
                    }
                },
                {
                    "name": "\u5176\u4ed6",
                    "value": 2.0,
                    "textStyle": {
                        "color": "rgb(12,44,50)"
                    }
                },
                {
                    "name": "\u5403\u559d",
                    "value": 10.0,
                    "textStyle": {
                        "color": "rgb(76,97,58)"
                    }
                },
                {
                    "name": "\u5b58\u8d77\u6765",
                    "value": 16.0,
                    "textStyle": {
                        "color": "rgb(37,76,32)"
                    }
                },
                {
                    "name": "\u65c5\u6e38",
                    "value": 8.0,
                    "textStyle": {
                        "color": "rgb(26,108,116)"
                    }
                },
                {
                    "name": "\u6dfb\u7f6e\u8863\u7269",
                    "value": 8.0,
                    "textStyle": {
                        "color": "rgb(29,144,38)"
                    }
                }
            ],
            "top": "10%",
            "drawOutOfBound": false,
            "textStyle": {
                "emphasis": {}
            }
        }
    ],
    "legend": [
        {
            "data": [],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "         \u5176\u4ed6\u82b1\u8d39",
            "target": "blank",
            "subtext": "\u5927\u6570\u636e\u79d1\u5b66 2200310758 \u5f20\u5586\u5a67",
            "subtarget": "blank",
            "left": "center",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_otherspend_wordcloud.setOption(option_otherspend_wordcloud);
    </script>
<br/>    </div>
    <script>
            $('#source_bar').css('border-style', 'dashed').css('border-width', '0px');$("#source_bar>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#source_bar'), function() { chart_source_bar.resize()});
            $('#spend_doughnut').css('border-style', 'dashed').css('border-width', '0px');$("#spend_doughnut>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#spend_doughnut'), function() { chart_spend_doughnut.resize()});
            $('#clothes_Line').css('border-style', 'dashed').css('border-width', '0px');$("#clothes_Line>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#clothes_Line'), function() { chart_clothes_Line.resize()});
            $('#spendway_pictoriabar').css('border-style', 'dashed').css('border-width', '0px');$("#spendway_pictoriabar>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#spendway_pictoriabar'), function() { chart_spendway_pictoriabar.resize()});
            $('#enough_pie').css('border-style', 'dashed').css('border-width', '0px');$("#enough_pie>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#enough_pie'), function() { chart_enough_pie.resize()});
            $('#read_polar').css('border-style', 'dashed').css('border-width', '0px');$("#read_polar>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#read_polar'), function() { chart_read_polar.resize()});
            $('#hobby_rose').css('border-style', 'dashed').css('border-width', '0px');$("#hobby_rose>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#hobby_rose'), function() { chart_hobby_rose.resize()});
            $('#otherspend_wordcloud').css('border-style', 'dashed').css('border-width', '0px');$("#otherspend_wordcloud>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#otherspend_wordcloud'), function() { chart_otherspend_wordcloud.resize()});
            var charts_id = ['source_bar','spend_doughnut','clothes_Line','spendway_pictoriabar','enough_pie','read_polar','hobby_rose','otherspend_wordcloud'];
function downloadCfg () {
    const fileName = 'chart_config.json'
    let downLink = document.createElement('a')
    downLink.download = fileName

    let result = []
    for(let i=0; i<charts_id.length; i++) {
        chart = $('#'+charts_id[i])
        result.push({
            cid: charts_id[i],
            width: chart.css("width"),
            height: chart.css("height"),
            top: chart.offset().top + "px",
            left: chart.offset().left + "px"
        })
    }

    let blob = new Blob([JSON.stringify(result)])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}
    </script>
</body>
</html>
